<template>
	<view class="container sea-panel padding">
		<!-- 基础用法，不包含校验规则 -->
		<uni-forms ref="baseForm" :modelValue="baseFormData">
			<uni-forms-item label="姓名" required>
				<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="年龄" required>
				<uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" />
			</uni-forms-item>
			<uni-forms-item label="性别" required>
				<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
			</uni-forms-item>
			<uni-forms-item label="兴趣爱好" required>
				<uni-data-checkbox v-model="baseFormData.hobby" multiple :localdata="hobbys" />
			</uni-forms-item>
			<uni-forms-item label="自我介绍">
				<uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入自我介绍" />
			</uni-forms-item>

			<uni-forms-item label="下拉框">
				<uni-data-select v-model="baseFormData.select" :localdata="range"></uni-data-select>
				<text class="text-block">传统意义上的下拉框，不方便单手操作，正常 APP 上几乎不会出现这种东西</text>
			</uni-forms-item>
			<uni-forms-item label="下拉框2">
				<uni-data-picker placeholder="请选择……" popup-title="" :localdata="range"
					v-model="baseFormData.select">
				</uni-data-picker>
				<text class="text-block">更大的按钮和点击区域，视觉上更容易聚焦于可选项，更适合APP上使用，但是相对的，PC 上端很难操作</text>
			</uni-forms-item>

			<uni-forms-item label="日期时间">
				<uni-datetime-picker type="datetime" return-type="timestamp" v-model="baseFormData.datetimesingle" />
			</uni-forms-item>
			
			<uni-forms-item label="日期" >
				<sea-picker mode="date" :value="baseFormData.date"  class="sea-picker">
					<view>{{ baseFormData.date || '请选择时间' }}</view>
				</sea-picker>
			</uni-forms-item>
			
			<uni-forms-item label="时间">
				<sea-picker mode="time" v-model="baseFormData.time"  class="sea-picker">
					<view>{{ baseFormData.time || '请选择时间' }}</view>
				</sea-picker>
			</uni-forms-item>
		</uni-forms>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				// 基础表单数据
				baseFormData: {
					name: '',
					age: '',
					introduction: '',
					sex: 2,
					hobby: [5],
					datetimesingle: 1627529992399,
					date: '',
					time: '',
					select: ''
				},
				// 单选数据源
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}, {
					text: '保密',
					value: 2
				}],
				// 多选数据源
				hobbys: [{
					text: '跑步',
					value: 0
				}, {
					text: '游泳',
					value: 1
				}, {
					text: '绘画',
					value: 2
				}, {
					text: '足球',
					value: 3
				}, {
					text: '篮球',
					value: 4
				}, {
					text: '其他',
					value: 5
				}],
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					}
				],
				array: ['中国', '美国', '巴西', '日本']
			}
		},
		methods: {
		}
	}
</script>

<style>

</style>